<template>
  <template v-for="index in str" :key="index.id">
    <tr>
      <td>{{ index.id }}</td>
      <td>{{ index.name }}</td>
      <td>{{ index.age }}</td>
      <td><button @click="$emit('change', index.id)">删除</button></td>
    </tr>
  </template>
</template>
<script>
export default {
  emits: ['change'],
  data() {
    return {}
  },
  props: ['msg', 'str']
}
</script>
<style scoped>
table {
  border-collapse: collapse;
}
td {
  border: 2px solid rgb(61, 186, 12);
}
td {
  width: 80px;
  height: 25px;
  text-align: center;
  line-height: 25px;
}
button {
  display: none;
}
tr:hover button {
  display: block;
}
</style>
